<template>
	<view>
		<image :src="HeaderImg" mode="widthFix" style="width: 100%;position: absolute;height: 150rpx;"></image>
		<view class="gui-flex gui-align-items-center gui-column gui-justify-content-center">
			<view class="gui-relative gui-text-center" style="">
				<view class="gui-bold gui-color-yellow gui-margin">{{info.activityName}}</view>
			 <view class="gui-color-white">{{$comm.toDate(info.startTime)}}至{{$comm.toDate(info.endTime)}}</view>
			</view>
			
			<view class="gui-flex gui-justify-content-center gui-relative gui-align-items-center btn_box" style="">
			 <view class="gui-flex btn_line" style="">
				<image :src="imgUrl" class="imgs  gui-flex"></image>
				 <text class="gui-relative active_btn gui-color-red" style="">活动介绍</text>
			 </view>
			 <view class="gui-flex" style="width: 200rpx;height: 80rpx;">
			 	<image :src="imgUrl" class="imgs  gui-flex"></image>
			 	<text class="gui-relative active_btn gui-color-red" style="">活动排名</text>
			 </view>
			</view>
			
			<view class="gui-bg-white course gui-relative gui-border-radius" v-for="(item,index) in onlineList">
				<view class="width-100 gui-margin-top gui-margin-x">
					<text class="online gui-padding-small gui-text gui-color-white">在线学习</text>
				</view>
				<view class="gui-flex gui-margin-x gui-margin-top" style="justify-content: space-between;align-items: center;">
					<view class="gui-flex gui-column">
						<text>{{item.actWorkName}}</text>
						<text class="gui-text gui-color-gray">{{item.num}}/{{item.allNum}}已经参加</text>
					</view>
					<view class="gui-margin-x">
						<button class="btn gui-color-white" @click="gotoDetail(info,onlineList)">开始学习</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				HeaderImg:"https://app.lgwisdomunion/static/img/banner.99acd5fd.png",
				imgUrl:"https://app.lgwisdomunion/static/img/banner-btn.863c43ff.png",
				info:{
					activityName:"",
					startTime:"",
					endTime:''
				},
				Oid:0,
				onlineList:[]
			}
		},
		onLoad(opt) {
			console.log(opt);
			this.Oid = opt.id
			this.queryInfo()
		},
		methods: {
			queryInfo(){
				let self = this
				self.$lg.Get("/APP/front/activity/queryInfo",{id:self.Oid},(res)=>{
					this.info = res.data
					this.onlineList = res.data.data
				})
			},
			gotoDetail(d,c){
				uni.navigateTo({
					// url:"/pages/home/Active/online/courseDetail",
					// data:data
					url:"/pages/home/Active/online/courseDetail?id="+d.id+"&actId="+c[0].actId+"&courseId="+c[0].correlationId,
				})
			// this.$comm.nav_to("#/pages/home/Active/online/oline",data)
			}
		}
	}
</script>

<style>
page{
	background-color: rgb(195,43,37);
}
.imgs{
	height: 80rpx;
	width: 200rpx;
	position: absolute;
}
.course{
	width: 700rpx;
	height: 200rpx;
	margin-top: 10rpx;
	z-index: 1;
}
.width-100{
	/* width: 100%; */
}
.btn_box{
	width: 100%;
	height: 100rpx;
	margin-top: 60rpx;
}
.btn_line{
	width: 200rpx;
	height: 80rpx;
}
.active_btn{
	width: 200rpx;
	text-align: center;
	margin-top: 10rpx;
	font-size: 26rpx;
}
.online{
	background: linear-gradient(to right, rgb(163,76,235), rgb(105,61,246));
	border-radius: 20% 0 20% 0;
	/* padding: 8rpx; */
}
.btn{
	width: 180rpx;
	height: 60rpx;
	line-height: 60rpx;
	font-size: 30rpx;
	border-radius: 40rpx;
	 background: linear-gradient(to right, rgb(244,104,57), rgb(251,88,98));
}
</style>
